<!DOCTYPE html>
<html lang="zh-cmn-Hans">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<title>个人中心</title>
		<link rel="stylesheet" href="../../css/ui.min.css" />
		<link rel="stylesheet" href="../../css/iconfont.css">
		<link rel="stylesheet" href="../../css/shop.css" />
		<link rel="stylesheet" href="../../css/mui.min.css">
	</head>
	<style>
		.icon-shouyi {
			color: white;
		}

		.ucenter-tcell {
			background: #9fcfbf;
		}

		.icon-yiwanchengdingdan,
		.icon-shoucang,
		.icon-daishouhuo,
		.icon-daifukuan,
		.icon-weibiaoti2fuzhi05 {
			color: white;
			font-size: 1.2rem;
			;
		}

		.my-item-box {
			width: 100%;
			padding: 5px;
			background: #66A792;
			color: white;
			font-size: 0.9rem;
			text-align: center;
			display: flex;
			justify-content: space-between;
		}

		.my-item {
			width: 20%;
		}
		.shezhi{
			position:absolute;
			top: 6%;
			left: 82%;
			color:white;
		}
	</style>
	<body ontouchstart>
		<div class="ui-content" id="app">
			<div class="ucenter-tcell">
				<div class="u-grids">
					<div class="u-avatar">
						<img class="mui-media-object mui-pull-left head-img" id="head-img" :src="userinfo.headimgurl" onerror='this.src="../../images/error.img.png"'>
					</div>
					<div class="u-name">{{userinfo.user_name}}</div>
					<div class="u-name">
						<span class="ui-icon-clear iconfont icon-shouyi"></span>余额：
						<span>{{userinfo.user_money}}</span>&nbsp;元
						<span style="margin-left:20px;"></span>VIP等级：<span>{{userinfo.vip_dengji}}</span>
					</div>
				</div>
				<div class="u-icon iconfont icon-shezhi shezhi"  @click="shezhi()">&nbsp;设置</div>
			</div>
			<div class="my-item-box">
				<div class="my-item shoucang" id="shopp-shoucang.html" @click="shoucangjia()">
					<div class="ui-icon-clear iconfont icon-shoucang"></div>
					<div>收藏夹</div>
				</div>
				<div class="my-item daifukuan" id="daifukuan.html" @click="daifukuan()">
					<div class="ui-icon-clear iconfont icon-daifukuan"></div>
					<div>待付款</div>
				</div>
				<div class="my-item daifahuo" id="daifahuo.html" @click="daifahuo()">
					<div class="ui-icon-clear iconfont icon-weibiaoti2fuzhi05"></div>
					<div>待发货</div>
				</div>
				<div class="my-item daishouhuo" id="daishouhuo.html" @click="daishouhuo()">
					<div class="ui-icon-clear iconfont icon-daishouhuo"></div>
					<div>待收货</div>
				</div>
				<div class="my-item ywc" id="ywcdingdan.html" @click="yiwancheng()">
					<div class="ui-icon-clear iconfont icon-yiwanchengdingdan"></div>
					<div>已完成</div>
				</div>
			</div>
			<div class="ui-ucenter-cells">
				<div class="ui-cell ui-cell_access ui-ucell shouyi"  @click="shouyi()">
					<div class="u-icon iconfont iconfont icon-shouyi" style="color:#999;"></div>
					<div class="ui-cell__bd">
						<p>今日收益</p>
					</div>
					<div class="ui-cell__ft"></div>
				</div>
				<div class="ui-cell ui-cell_access ui-ucell mydingdan"  @click="dingdan()">
					<div class="u-icon iconfont icon-weibiaoti-" style="color:#999;"></div>
					<div class="ui-cell__bd">
						<p>我的订单</p>
					</div>
					<div class="ui-cell__ft"></div>
				</div>
				<div class="ui-cell ui-cell_access ui-ucell sq_tuikuan"  @click="tuihuan()">
					<div class="u-icon iconfont icon-tuihuo" style="color:#999;"></div>
					<div class="ui-cell__bd">
						<p>退货退款</p>
					</div>
					<div class="ui-cell__ft"></div>
				</div>
			</div>
			<div class="ui-ucenter-cells">
				<div class="ui-cell ui-cell_access ui-ucell bjshouhuodizhi" @click="addr()">
					<div class="u-icon iconfont icon-dizhi" style="color:#999;"></div>
					<div class="ui-cell__bd">
						<p>收货地址</p>
					</div>
					<div class="ui-cell__ft"></div>
				</div>
			</div>
		</div>
		
	</body>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/vue.min.js"></script>
	<script src="../../js/common/config.js"></script>
	<script>
		// mui插件初始化
		mui.init();
		mui.plusReady(function() {
			vm.init();
		})
		
		var vm = new Vue({
			el: "#app",
			data: {
				userinfo:{},
			},
			methods: {
				init(){
					this.getUserInfo();
				},
				getUserInfo(){
					var _that = this;
					mui.ajax(Config.api.User_personal, {
						data: {
							request_type: 1,
							user_id: localStorage.getItem('user_id'),
						},
						type: 'post',
						dataType: 'json',
						success: function(data) {
							_that.userinfo = data;
						},
						error: function(xhr, type, errorThrown) {
							console.log("接口错误");
						},
					});
				},
				//设置 
				shezhi(){
					var url = "./shezhi.html";
					this.openWin(url);
				},
				// 收藏夹
				shoucangjia(){
					var url = "./shopp-shoucang.html";
					this.openWin(url);
				},
				// 代付款
				daifukuan(){
					var url = "./daifukuan.html";
					this.openWin(url);
				},
				// 代发货
				daifahuo(){
					var url = "./daifahuo.html";
					this.openWin(url);
				},
				// 待收货
				daishouhuo(){
					var url = "./daishouhuo.html";
					this.openWin(url);
				},
				// 已完成
				yiwancheng(){
					var url = "./ywcdingdan.html";
					this.openWin(url);
				},
				// 今日收益
				shouyi(){
					var url = "./shouyi.html";
					this.openWin(url);
				},
				// 我的订单
				dingdan(){
					var url = "./dingdan.html";
					this.openWin(url);
				},
				// 退货退款
				tuihuan(){
					var url = "./tuihuan.html";
					this.openWin(url);
				},
				// 收货地址
				addr(){
					var url = "./my-add.html";
					this.openWin(url);
				},
				// 打开新窗口
				openWin(url, param = {}){
					mui.openWindow({
						url: url,
						id: url,
						styles: {
							top: '0px', //新页面顶部位置
							bottom: '0px', //新页面底部位置
							popGesture: 'close'
						},
						extras:param
					})
				}
			}
		});
	
	
	</script>
</html>
